<template>
  <t-card :bordered="false">
    <!-- 搜索 -->
    <custom-search ref="customSearchRef" v-slot="{ params }" @submit="handleInitTable">
      <t-col :span="3">
        <t-form-item label="分类名称" name="name">
          <t-input v-model:value="params.name" placeholder="请输入分类名称" clearable />
        </t-form-item>
      </t-col>
      <t-col :span="3">
        <t-form-item label="分类标志" name="code">
          <t-input v-model:value="params.code" placeholder="请输入分类标志" clearable />
        </t-form-item>
      </t-col>
    </custom-search>
    <!-- 表格 -->
    <custom-table ref="customTableRef" row-key="id" :columns="columns" :api="categoryCRUD.page"
      column-controller-key="BpmCategoryList">
      <template #topContent>
        <div style="margin-bottom: var(--td-comp-margin-xxl)">
          <t-button v-permission="['bpm:category:create']" @click="handleOpenDialog('create')">新增分类</t-button>
        </div>
      </template>
      <template #status="{ row }">
        <t-tag variant="light" :theme="row.status === 0 ? 'success' : 'danger'">
          {{ row.status === 0 ? '开启' : '关闭' }}
        </t-tag>
      </template>
      <template #createTime="{ row }">
        {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
      <template #operation="{ row }">
        <t-space break-line>
          <t-link v-permission="['bpm:category:update']" theme="primary" @click="handleOpenDialog('update', { id: row.id })">
            编辑
          </t-link>
          <t-popconfirm content="确认要删除该项吗？" @confirm="handleDelete({ id: row.id })">
            <t-link v-permission="['bpm:category:delete']" theme="danger"> 删除 </t-link>
          </t-popconfirm>
        </t-space>
      </template>
    </custom-table>
    <!-- 对话框 -->
    <custom-dialog ref="customDialogRef" v-slot="{ formData, readonly }" :api-map="categoryCRUD" header="*流程分类" @request-success="handleDialogRequestSuccess">
      <t-form-item label="分类名称" name="name" :rules="[{ required: true, message: '分类名称', trigger: 'blur' }]">
        <t-input v-model:value="formData.name" :readonly="readonly" placeholder="请输入分类名称" />
      </t-form-item>
      <t-form-item label="分类标志" name="code" :rules="[{ required: true, message: '分类标志不能为空', trigger: 'blur' }]">
        <t-input v-model:value="formData.code" :readonly="readonly" placeholder="请输入分类标志" />
      </t-form-item>
      <t-form-item label="分类状态" name="status" :rules="[{ required: true, message: '分类状态不能为空', trigger: 'blur' }]">
        <t-radio-group v-model:value="formData.status" :readonly="readonly">
          <t-radio
            v-for="dict in dictionaryStore.get('common_status','number')"
            :key="dict.value"
            :value="dict.value"
          >
            {{ dict.label }}
          </t-radio>
        </t-radio-group>
      </t-form-item>
      <t-form-item label="分类顺序" name="sort" :rules="[{ required: true, message: '分类顺序不能为空', trigger: 'blur' }]">
        <t-input-number v-model:value="formData.sort" :readonly="readonly" :min="0" :max="9999" style="width:100%" />
      </t-form-item>
    </custom-dialog>
  </t-card>
</template>

<script lang="ts">
export default {
  name: 'BpmCategory',
};
</script>

<script lang="ts" setup>
import dayjs from 'dayjs';
import { onMounted, useTemplateRef } from 'vue';
import { DialogPlugin, MessagePlugin, TableCol } from 'tdesign-vue-next';

import { categoryCRUD } from '@/api/bpm/category';
import CustomDialog from '@/components/custom/dialog/index.vue';
import CustomSearch from '@/components/custom/search/index.vue';
import CustomTable from '@/components/custom/table/index.vue';
import { useDictionaryStore } from '@/store';
// 字典仓库
const dictionaryStore = useDictionaryStore();
// 自定义搜索ref
const customSearchRef = useTemplateRef('customSearchRef');
// 自定义表格ref
const customTableRef = useTemplateRef('customTableRef');
// 自定义对话框ref
const customDialogRef = useTemplateRef('customDialogRef');

// columns
const columns: TableCol[] = [
  { colKey: 'id', title: '编号', width: 80 },
  { colKey: 'name', title: '分类名称' },
  { colKey: 'code', title: '分类标志' },
  { colKey: 'description', title: '分类描述' },
  { colKey: 'status', title: '分类状态', width: 100 },
  { colKey: 'sort', title: '分类排序', width: 100 },
  { colKey: 'createTime', title: '创建时间', width: 180 },
  { colKey: 'operation', title: '操作', width: 200 },
];

// 处理初始化表格
const handleInitTable = () => {
  customTableRef.value.initTable(customSearchRef.value.params);
};

// 处理刷新表格
const handleRefreshTable = () => {
  customTableRef.value.refreshTable();
};
// 处理对话框请求成功
const handleDialogRequestSuccess = (result: Record<string, any>) => {
  if (result.mode === 'create') handleInitTable();
  if (result.mode === 'update') handleRefreshTable();
};
// 处理打开对话框
const handleOpenDialog = (mode: 'create' | 'update', params?: Record<string, any>) => {
  customDialogRef.value.open(mode, params);
};

// 处理删除
const handleDelete = (params: Record<string, any>) => {
  categoryCRUD
    .delete(params)
    .then(() => {
      MessagePlugin.success('删除成功');
      handleRefreshTable();
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    });
};
onMounted(() => {
  handleInitTable();
});
</script> 